<template>
  <div class="container-box">
    <div id="chartGauge" ref="chartGauge" style="width:100%;height:100%;"></div>
  </div>
</template>
<script lang="ts">
import * as echarts from 'echarts';
import { defineComponent, ref, nextTick, watch } from 'vue';
export default defineComponent({
  name: 'LineEchart',
  props: {
    nodes: {
      type: Object,
      default: () => { return [] } 
    }
  },
  setup(props) {
    let myChart:any
    const chartGauge = ref()
    const data: any = ref([])
    watch(
        () => props.nodes,
        (old, val) => {
          if( val && old !== val) {
            data.value = old;
            initData()
            initChart()
          }
        },
        { immediate: true, deep: true }
    );
    const option = ref({
      title:{
        text: '下载',
        left: 'center',
        top: '80%',
        textStyle: {
          color: '#3488db',
          fontSize: 12,
          fontFamily: 'cuhei',
          fontWeight: 600
        }
      },
      series: [
        {
          type: 'gauge',
          axisLine: {
            lineStyle: {
                width: 12,
                color: [
                  [0.2, '#0CB9F3'],
                  [1, '#0049FF']
                ]
              }
          },
          radius: '90%',
          markPoint: {
            // 仪表盘指针圆
            animation: false,
            silent: true,
            data: [
              {
                x: '50%',
                y: '50%',
                symbol: 'circle',
                symbolSize: 20,
                itemStyle: {
                  color: 'auto'
                }
              },
              {
                x: '50%',
                y: '50%',
                symbol: 'circle',
                symbolSize: 10,
                itemStyle: {
                  color: '#fff'
                }
              }
            ]
          },
          pointer: {
            // 仪表盘指针
            width: 10,
            length: '60%',
            itemStyle: {
              color: 'auto'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
            distance: 25,
            color: '#999',
            fontSize: 20
          },
          detail: {
            valueAnimation: true,
            fontSize: 16,
            // offsetCenter: [0, '70%']
          },
          data: [
            {
              value: 70
            }
          ]
        }
      ]
    })
    const initChart = () => {
      nextTick(() => {
        myChart = echarts.init(chartGauge.value)
        myChart && myChart.setOption(option.value)
      })
    }
    const initData = () => {
      const nodes = data.value;
      let  _ydata: any = 0;
      nodes.length && nodes.forEach((item: any) => {
        _ydata += (Number(item.OutBM) || 0)
      })
      option.value.series[0].data[0].value = _ydata.toFixed(2)
    }
    return {
      chartGauge
    }
  }
})

</script>
<style lang="scss" scoped>
.container-box{
  height: 200px;
  width: 300px;
}
</style>